<template>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="black"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <div class="left-container">
      <div class="logo-container">
        <img src="./assets/imgs/qijuLogo.jpg" alt="Logo" class="logo-image" />
      </div>
      <el-menu-item index="1" class="home-item" @click="goToHome"
        >首页</el-menu-item
      >
      <el-menu-item index="2" class="home-item" @click="goToConsole"
        >控制台</el-menu-item
      >
    </div>
    <div class="right-container">
      <el-menu-item index="4" class="login-item" @click="goToLoginOrProfile">
        {{ isUserLoggedIn ? userName : '登录' }}
      </el-menu-item>
    </div>
  </el-menu>
  <RouterView />
</template>
  
  <script setup>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 定义 reactive state
const activeIndex2 = ref("1");
const userName = ref('');
const isUserLoggedIn = ref(false);

// 检查本地存储中的 token 和 userName
onMounted(() => {
  const storedToken = localStorage.getItem('token');
  const storedUserName = localStorage.getItem('customer'); // 假设 userName 存储在 customer 字段
  if (storedToken && storedUserName) {
    isUserLoggedIn.value = true;
    userName.value = storedUserName;
  }
});
// const goToLogin = () => {
//   router.push('/login');
// };
const goToHome = () => {
  router.push('/home');
};
const goToConsole = () => {
  router.push('/console');
};
const goToLoginOrProfile = () => {
  if (isUserLoggedIn.value) {
    router.push('/profile'); // 假设有一个个人中心页面
  } else {
    router.push('/login');
  }
};
// 定义事件处理函数
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>
  
<style scoped>
.el-menu-demo {
  display: flex;
  justify-content: center; /* 使子元素在水平方向上分布 */
  align-items: center; /* 使子元素在垂直方向上居中 */
}

/* 直接设置 el-menu-item 的字体大小 */
.el-menu-demo .el-menu-item {
  font-size: 15px;
}

.left-container {
  display: flex;
  align-items: center;
  gap: 2px; /* 左侧内容之间的间距 */
  margin-right: 300px !important; /* 调整这个值来设置间距 */
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-image {
  height: 32px; /* 设置图片的高度 */
  width: auto; /* 保持图片的比例 */
  max-width: 100%; /* 确保图片不会超出容器 */
}

.right-container {
  display: flex;
  align-items: center;
  gap: 20px; /* 右侧内容之间的间距 */
  margin-left: 300px !important; /* 调整这个值来设置间距 */
}
</style>